<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row type="flex" class="h-100">
			<cl-biz-toolbar v-model="currBiz.biz_id" @change="changeBiz" />
			<cl-flex1 style="overflow: hidden" class="h-100">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div class="title">{{ currBiz.biz_name }}</div>
							<cl-flex1 />
							<div>
								<cl-filter-group v-model="search">
									<cl-filter label="加微方式">
										<cl-select
											v-model="search.id_join_type"
											style="width: 160px"
											clearable
											@change="refresh()"
										>
											<el-option label="全部" value="" />
											<el-option
												v-for="item in addType"
												:key="item.value"
												:label="item.label"
												:value="item.value"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="品牌">
										<cl-select
											v-model="search.bra_id"
											style="width: 160px"
											placeholder="全部"
											clearable
											filterable
											multiple
											collapse-tags
											@change="refresh()"
										>
											<el-option
												v-for="item in bizRefData.brand"
												:key="item.bra_id"
												:label="item.bra_name"
												:value="item.bra_id"
											/>
										</cl-select>
									</cl-filter>
									<cl-filter label="类型">
										<cl-select
											v-model="search.type"
											style="width: 150px"
											clearable
											@change="refresh()"
										>
											<el-option label="全部" value="" />
											<el-option label="售前" :value="1" />
											<el-option label="售中" :value="2" />
										</cl-select>
									</cl-filter>
									<cl-filter label="关键字">
										<el-input
											v-model="search.keyword"
											placeholder="请输入加微号"
											clearable
											style="width: 150px"
											@change="refresh()"
										/>
									</cl-filter>
									<cl-filter label="广告账户账号">
										<el-input
											v-model="search.supplie"
											placeholder="请输入广告账户账号"
											clearable
											style="width: 170px"
											@change="refresh()"
										/>
									</cl-filter>
									<cl-filter label="企业微信">
										<cl-select
											v-model="search.corpid"
											placeholder="请选择"
											style="width: 100%"
											filterable
											@change="changeCorp"
											:disabled="editing"
										>
											<el-option
												v-for="(item, index) in wxkConfigList"
												:label="item.wxk_name"
												:key="index"
												:value="item.corpid"
											/>
										</cl-select>
									</cl-filter>
								</cl-filter-group>
								<el-button type="primary" icon="el-icon-plus" @click="add" size="small">
									添加加微方式
								</el-button>
							</div>
						</el-row>
					</template>
					<cl-table v-bind="table">
						<cl-empty slot="empty" />
						<!-- <template #column-wechat_image_url="{ scope: { row } }">
							<div class="flex flex-align-center flex-justify-center">
								<cl-avatar
									shape="square"
									v-if="row.wechat_image_url"
									:src="`${row.wechat_image_url}`"
									:preview-src-list="[row.wechat_image_url]"
									:size="60"
								/>
								<span v-else>-</span>
							</div>
						</template> -->
						<template #column-opt="{ scope: { row } }">
							<el-button type="primary" @click="edit(row)">修改</el-button>
							<el-button type="danger" @click="onBing(row)" :disabled="row.type != 5">绑定</el-button>
							<el-dropdown
								class="ml-1"
								size="medium"
								@command="command => onCommand(command, row)"
							>
								<el-button>
									更多<i class="el-icon-arrow-down el-icon--right" />
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="journal">日志</el-dropdown-item>
									<el-dropdown-item command="copy">复制</el-dropdown-item>
									<el-dropdown-item command="del"> 删除 </el-dropdown-item>
									<el-dropdown-item command="account">
										上传素材
									</el-dropdown-item>
									<!-- <el-dropdown-item command="checkMaterial">
										检查素材是否上传
									</el-dropdown-item> -->
								</el-dropdown-menu>
							</el-dropdown>
						</template>

						<!-- <template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="primary" @click="dayTrack(row)"> 日跟踪 </el-button>
							<el-button type="danger" @click="groupTask(row)"> 组员任务 </el-button>
							<el-dropdown
								class="ml-1"
								size="medium"
								@command="(command) => onCommand(command, row)"
							>
								<el-button>
									更多<i class="el-icon-arrow-down el-icon--right" />
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit">修改</el-dropdown-item>
									<el-dropdown-item command="remove"> 删除 </el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</template> -->
					</cl-table>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
			<!-- 新增、修改 -->
			<add-wechat-form ref="form" @confirm="refresh" />
		</el-row>
		<cl-dialog title="日志" :visible.sync="journalVisible">
			<zm-table v-bind="journalTable" :data="journalData"> </zm-table>
		</cl-dialog>
		<add-account-form ref="addaccountform" @confirm="refresh"></add-account-form>
		<!-- 绑定 -->
		<bind-wechat-form ref="bindWechatForm" @confirm="refresh"></bind-wechat-form>
	</cl-crud>
</template>
<script>
import AddWechatForm from "./components/add-wechat-form";
import BindWechatForm from './components/bind-wechat-form';
export default {
	name: "SetPromotionAddWechat",
	components: {
		AddWechatForm,
		BindWechatForm,
		AddAccountForm: () => import("./components/add-account-form.vue")
	},
	data() {
		return {
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", width: 50, fixed: true },
					{
						label: "加微号",
						prop: "content",
						minWidth: 120,
						formatter: row => row.content || "-",
						align: "left",
						showOverflowTooltip: true
					},
					// { label: "加微图", prop: "wechat_image_url", width: 90 },
					{ label: "所属企微", prop:"wxk_name", width: 90},
					{ label: "加微方式", prop: "type_dec", width: 120 },
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "绑定客服",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true,
						formatter: row => row.bind.user_name
					},
					{
						label: "所属渠道",
						prop: "source_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "所属广告账户",
						prop: "supplie_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "所属推广人",
						prop: "promoter_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "类型",
						prop: "role",
						width: 100,
						formatter: row => (row.role == 1 ? "售前" : "售中")
					},
					{ label: "操作", prop: "opt", width: 240, fixed: "right" }
				],
				props: {
					maxHeight: 500
				}
			},

			search: {
				id_join_type: "",
				keyword: "",
				supplie: "",
				bra_id: [],
				type: "",
				showpage: 1,
				corpid: ""
			},
			addType: [
				{ label: "加微号-微信号", value: 1 },
				{ label: "加微号-QQ", value: 3 },
				{ label: "加微号-手机号", value: 2 },
				{ label: "加微码-二维码", value: 4 },
				{ label: "企微码-企业微信码", value: 5 }
			],
			currBiz: {
				biz_id: ""
			},
			load: false,
			//日志弹框
			journalVisible: false,
			journalTable: {
				"context-menu": [],
				columns: [
					{ type: "index", label: "#", width: 50, fixed: true },
					{ label: "操作内容", prop: "content" },
					{
						label: "操作人",
						prop: "user_name"
					},
					{ label: "操作时间", prop: "create_date" }
				],
				props: {
					maxHeight: 500
				}
			},
			journalData: [],
			wxkConfigList: [],
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.currBiz;
			return this.getBizRefData(biz_id);
		}
	},
	mounted() {
		if (this.$route.query && this.$route.query.addType) {
			this.search.id_join_type = parseInt(this.$route.query.addType)
		}
	},
	activated() {
		if (this.$route.query && this.$route.query.addType) {
			this.search.id_join_type = parseInt(this.$route.query.addType)
		}
	},
	methods: {
		async init() {
			const { biz_id } = this.currBiz;
			this.getBizRefBrand(biz_id);
			this.getWxkConfig(biz_id)
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ app, ctx }) {
			ctx.service(this.$service.config)
				.set("dict", {
					api: { page: "wechatLists" }
				})
				.done();
			// if (!this.load) return;
			app.refresh();
		},
		async onRefresh(params, { next, render, done }) {
			if (!this.load) {
				done();
				return;
			}
			const { biz_id } = this.currBiz;
			let query = {
				...params,
				...this.search,
				biz_id
			};
			const { lists, total } = await next(query);
			render(lists, {
				...query,
				total
			});
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.load = true;
			this.$refs.crud.refresh(params);
		},
		openForm(type, data) {
			this.$refs.form.open(type, data);
		},
		//切换事业部
		changeBiz(v) {
			this.currBiz = v;
			this.init();
			this.$nextTick(() => {
				this.refresh();
			});
		},
		add() {
			this.openForm("add", {});
		},
		//日志
		async journal(row) {
			const res = await this.$service.config.wechatLog({ wechat_id: row.id });
			this.journalData = res;
			this.journalVisible = true;
		},
		// 更多
		onCommand(command, row) {
			this[command](row);
		},
		// 修改
		edit(row) {
			this.openForm("edit", row);
		},
		//删除
		del(row) {
			this.confirm("此操作将删除该加微号, 是否继续?")
				.then(async () => {
					const res = await this.$service.config.wechatDel({ id: row.id });
					this.refresh();
					this.$message.success("删除成功!");
				})
				.catch(() => {});
		},
		onBing(row)  {
			this.$refs.bindWechatForm.open(row)
		},
		//绑定公众号
		account(row) {
			this.$refs.addaccountform.open(row);
		},
		// 检查素材是否上传
		async checkMaterial({ id, app_id }) {
			const res = await this.$service.config.checkMaterial({
				id,
				app_id
			});
			this.$message.warning(res);
		},
		// 复制
		copy(row) {
			this.openForm("copy", row);
		},
		async getWxkConfig(biz_id)
		{
			this.wxkConfigList = await this.$service.workwechat.getWxkConfigList({
				biz_id,
				no_page: 1
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
